<template>
  <img v-bind:src="pic" alt="" />
  <a :href="url">去百度</a>

  <!-- <h2 @click="handle" :class="name">thanks giving</h2> -->
  <h2 @click="handle" :class="['red', 'green']">thanks giving</h2>

  <input type="text" @input="onChange" :value="val" />
  <h4>{{ val }}</h4>
</template>

<script setup>
import { ref } from 'vue';
const pic =
  'https://images.unsplash.com/photo-1718785461588-4b0b4b4ef37e?q=80&w=3174&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
const url = 'https://www.baidu.com';

let val = ref('hello');
let name = ref('');
let active = ref(false);
const handle = () => {
  active.value = !active.value;
};

const onChange = (e) => {
  val.value = e.target.value;
};
</script>

<style lang="css">
img {
  width: 800px;
}

.red {
  color: red;
}

.green {
  color: green;
}
</style>
